<template>
	<view class="home">
		<view class="home_box_item home_box_top">
			<view class="home_box_top_right">
				<view class="home_box_top_right_sousuo" @click="goFun('/pages/home/search/search?type=null&title=搜索')">
					<u-icon name="search" color="#f2f2f2" size="24"></u-icon>
					<view class="home_box_top_right_sousuo_text">
						请输入关键字
					</view>
				</view>
			</view>
		</view>
		<view class="home_box">
			<view class="home_box_">
				<view style="padding: 20rpx;">
					<swiper class="swiper" indicator-color='#fff' indicator-active-color='#ff594d'
						:indicator-dots="true" autoplay="true" interval="2000" duration="1000">
						<swiper-item class="swiper_item" v-for="(item,index) in res.banner" :key="index">
							<image :src="item.thumb" mode="widthFix"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="home_box_item" v-if="zixuen.length !== 0">
					<u-notice-bar :text="zixuen" direction='column' @click="zixuenGoFun" mode='link'></u-notice-bar>
				</view>
				<view class="home_box_item">
					<u-grid :border="false" col="5">
						<u-grid-item v-for="(listItem,listIndex) in res.menu" :key="listIndex" style="margin: 20rpx 0;"
							@click="click(listItem.link)">
							<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon> -->
							<image style="width: 60rpx;height: 60rpx;border-radius: 50%;" :src="listItem.thumb" mode="">
							</image>
							<text class="grid-text" style="font-size: 25rpx;">{{listItem.bannername}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
				<view class="home_box_item"
					style="display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 40rpx;">
					<view class="home_box_item" style="display: flex;flex-direction: column;padding: 0;">
						<view class="home_box_item_box" style="display: flex;justify-content: space-between;">
							<view class="home_box_item_zhuanqu"
								@click="goFun('/pages/home/SearchingList/SearchingList?type=5&title=精品区')">
								<p>精品区</p>
								<span>超值好物</span>
							</view>
							<view class="home_box_item_zhuanqu1"
								@click="goFun('/pages/home/SearchingList/SearchingList?type=10&title=助农区')">
								<p>助农区</p>
								<span>精心挑选</span>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="home_box_item">
					<view class="home_box_items">
						<view class="home_box_items_title">
							{{ress.title}}
						</view>
						<view class="home_box_items_bottom">
							<view class="home_box_items_bottom_item">
								<image :src="item.pic_url" mode="widthFix" v-for="(item,index) in ress.left"
									:key="item.id">
								</image>
							</view>
							<view class="home_box_items_bottom_item">
								<image :src="item.pic_url" mode="widthFix" v-for="(item,index) in ress.right"
									:key="item.id"></image>
							</view>
						</view>
					</view>
				</view> -->
				<view class="home_box_item">
					<view class="home_box_item_" v-for="(item,index) in res.new_goods_list" :key="index">
						<u-divider :text="item.title" textColor="#FF4D2A" lineColor="#FF4D2A"
							v-if="item.goods_list.length !== 0"></u-divider>
						<view class="home_box_item_goods">
							<view class="home_box_item_goods_item" v-for="(items,indexs) in item.goods_list"
								:key="indexs"
								@click="goFun(`/pages/home/commodity_details/commodity_details?id=${items.id}`)">
								<image class="home_box_item_goods_item_image" :src="items.thumb" mode=""></image>
								<view class="home_box_item_goods_item_title">
									{{items.title}}
								</view>
								<view class="home_box_item_goods_item_marketprice">
									<text>
										￥{{items.marketprice}}
									</text>
									<text class="home_box_item_goods_item_marketprice_goumai">
										购买
									</text>
								</view>
								<view class="home_box_item_goods_item_lsjf">
									赠送绿色积分：{{items.lsjf?items.lsjf:'0.00'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tab-ber :current='0'></tab-ber>
		<more-hot></more-hot>
	</view>
</template>

<script>
	import tabBer from '@/components/appTab/appTab.vue';
	import MoreHot from '@/components/MoreHot.vue'

	import {
		api_index_get_index,
		api_index_get_chuchuang_pic
	} from '@/api/home.js';
	export default {
		components: {
			tabBer,
			MoreHot
		},
		data() {
			return {
				res: '',
				current: 0,
				sousuo: '',
				zixuen: [],
				ress: ''
			};
		},
		onShow() {
			uni.hideTabBar();
			this.api_index_get_indexFun();
			this.api_index_get_chuchuang_picFun();

		},
		methods: {
			async api_index_get_chuchuang_picFun() {
				let data = await api_index_get_chuchuang_pic();
				this.ress = data
				console.log(data);
			},
			goMember() {
				uni.switchTab({
					url: '/pages/member/member'
				})
			},
			goFun(url) {
				uni.navigateTo({
					url
				})
			},
			zixuenGoFun(index) {
				uni.navigateTo({
					url: `/pages/Information/Information_details/Information_details?id=${this.res.article_list[index].id}`
				})
			},
			async api_index_get_indexFun() {
				this.zixuen = [];
				let data = await api_index_get_index();
				this.res = data;
				data.article_list.forEach(item => {
					this.zixuen.push(item.article_title)
				})

			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
			click(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				} else {
					this.showinteraction('暂未开放')
				}
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 100%;
		height: 300rpx;
		border-radius: 40rpx;
		overflow: hidden;

		.swiper_item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}




	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 10px;
			width: 10px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			margin-top: -50rpx;
			transition: background-color 0.3s;

			&--active {
				background-color: rgb(255, 127, 27);
			}
		}
	}

	.home {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding-top: var(--status-bar-height);
		padding-bottom: 50rpx;
		overflow: hidden;

		.home_box {
			width: 100%;
			height: calc(100vh - 110rpx - var(--status-bar-height));
			position: absolute;
			bottom: 0;
			overflow: hidden;
			// margin-top: -40rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background-color: #f8f8f8;
			// background-color: #000;
			padding-bottom: 120rpx;

			.home_box_ {
				overflow-y: auto;
				width: 100%;
				height: 100%;
				// background-color: #f8f8f8;
				// height: 100%;
				// background-image: url('https://www.sxjlsj.cn/static/image/jx.png');
				// background-repeat: no-repeat;
				// background-size: 100% 172px;
				// background-position: top;





				.home_box_item {
					width: 100%;
					padding: 0 20rpx;


					.home_box_items {
						width: 100%;
						padding: 20rpx;
						height: 1000rpx;
						display: flex;
						flex-direction: column;
						background-color: #fb3536;
						border-radius: 20rpx;

						.home_box_items_title {
							width: 100%;
							// height: 60rpx;
							padding: 20rpx 0;
							line-height: 60rpx;
							text-align: center;
							font-size: 60rpx;
							color: #FFF;

						}

						.home_box_items_bottom {
							flex: 1;
							width: 100%;
							overflow-y: auto;
							display: flex;
							justify-content: space-around;
							flex-wrap: wrap;


							.home_box_items_bottom_item {
								width: 46%;
								// margin-top: 30rpx;

								image {
									margin-top: 20rpx;
									border-radius: 20rpx;
								}
							}
						}
					}

					.home_box_item_zhuanqu {
						width: 48%;
						height: 152rpx;
						background-image: url('@/static/home/zp.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin-top: 20rpx;
						padding: 20rpx;
						color: #fff;
						border-radius: 20rpx;
					}

					.home_box_item_zhuanqu1 {
						width: 48%;
						height: 152rpx;
						background-image: url('@/static/home/zp1.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin-top: 20rpx;
						padding: 20rpx;
						color: #fff;
						border-radius: 20rpx;
					}

					.home_box_item_zhuanqus {
						border-radius: 20rpx;
						width: 100%;
						height: 152rpx;
						background-image: url('@/static/home/zp.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin-top: 20rpx;
						padding: 20rpx;
						color: #fff;
						border-radius: 20rpx;
					}

					.home_box_item_zhuanqu1s {
						width: 100%;
						height: 152rpx;
						background-image: url('@/static/home/zp1.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin-top: 20rpx;
						padding: 20rpx;
						color: #fff;
					}

					.home_box_item_zhuanqu2 {
						width: 100%;
						height: 310rpx;
						background-image: url('@/static/home/zhengfangx.jpg');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin-top: 20rpx;
						border-radius: 20rpx;
						overflow: hidden;
						padding: 20rpx;
						color: #fff;
					}



					.home_box_item_goods {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.home_box_item_goods_item {
							width: 48%;
							margin-bottom: 30rpx;
							height: 500rpx;
							box-shadow: 0 0 10rpx #ccc;
							display: flex;
							flex-direction: column;
							align-items: center;
							// padding: 20rpx 0;

							.home_box_item_goods_item_image {
								width: 100%;
								height: 340rpx;
								margin: 0 auto;
							}

							.home_box_item_goods_item_title {
								width: 100%;
								text-wrap: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								padding: 10rpx 20rpx;
								font-size: 30rpx;
							}

							.home_box_item_goods_item_marketprice {
								width: 100%;
								padding: 5rpx 20rpx;
								color: red;
								font-size: 26rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								text-wrap: nowrap;
								// font-weight: 550;
								position: relative;

								.home_box_item_goods_item_marketprice_goumai {
									position: absolute;
									padding: 1rpx 20rpx;
									background-color: #fb3536;
									color: #fff;
									right: 20rpx;
									box-sizing: border-box;
									border-radius: 100rpx;
								}
							}

							.home_box_item_goods_item_lsjf {
								width: 100%;
								padding: 0 20rpx;
								font-size: 26rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								text-wrap: nowrap;
							}
						}
					}

				}

			}


		}

		.home_box_top {
			background-color: #fb3536;
			display: flex;
			justify-content: center;
			padding: 20rpx 0 60rpx 0;
			height: 150rpx;

			.home_box_top_right {
				// flex: 1;

				height: 70rpx;
				width: 100%;
				padding: 0 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.home_box_top_right_sousuo {
					width: 100%;
					height: 100%;
					background-color: rgba(255, 255, 255, .3);
					padding: 0 20rpx;
					border-radius: 70rpx;
					// margin-right: 20rpx;
					display: flex;
					align-items: center;

					.home_box_top_right_sousuo_text {
						flex: 1;
						padding: 0 10rpx;
						font-size: 26rpx;
						color: grey;

					}
				}

				.person-filled_box {
					width: 44rpx;
					height: 44rpx;
					border: 1rpx solid #fff;
					border-radius: 50%;
				}
			}
		}
	}
</style>